<?php
/**
 * TomatoCMS
 * 
 * LICENSE
 *
 * This source file is subject to the GNU GENERAL PUBLIC LICENSE Version 2 
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@tomatocms.com so we can send you a copy immediately.
 * 
 * @copyright	Copyright (c) 2009-2010 TIG Corporation (http://www.tig.vn)
 * @license		http://www.gnu.org/licenses/gpl-2.0.txt GNU GENERAL PUBLIC LICENSE Version 2
 * @version 	$Id: edit.phtml 5431 2010-09-14 08:56:24Z huuphuoc $
 * @since		2.0.7
 */
?>
<?php 
$this->headTitle($this->translator('page_edit_page_title'));

$this->headScript()
	->appendFile($this->APP_STATIC_SERVER . '/js/jquery.validate/jquery.validate.min.js')
	->appendFile($this->APP_STATIC_SERVER . '/js/tomato/util.js');
?>

<script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/tinymce/tiny_mce.js"></script>

<?php $this->headStyle()->captureStart(); ?>
.uploadifyQueueItem { width: 220px; }
.photos { height: 250px; overflow: auto; border: 1px solid #444; padding: 5px; }
.photos li { float: left; margin-right: 10px; margin-bottom: 15px; }
<?php $this->headStyle()->captureEnd(); ?>

<div class="grid_12 t_a_ui_breadcrumb">
	<span><a href="<?php echo $this->url(array(), 'page_page_list'); ?>"><?php echo $this->translator('page_list_breadcrumb'); ?></a></span>
	<span><?php echo $this->translator('page_edit_breadcrumb'); ?></span>	
</div>

<div class="grid_12"><?php echo $this->flashMessenger(); ?></div>

<form method="post" action="<?php echo $this->url(array('page_id' => $this->page->page_id), 'page_page_edit'); ?>" id="editPageForm">
<div class="grid_12 t_a_bottom"><?php echo $this->translator('page_edit_guide'); ?></div>

<div class="grid_12 t_a_bottom">
	<div class="prefix_1 suffix_1">
		<div class="clearfix t_a_bottom">
			<label><?php echo $this->translator('page_name'); ?>:</label>
			<input maxlength="255" type="text" id="name" name="name" style="width: 300px" value="<?php echo $this->page->name; ?>" />
		</div>
		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<label><?php echo $this->translator('page_slug'); ?>:</label>
			<input maxlength="255" type="text" id="slug" name="slug" style="width: 300px" value="<?php echo $this->page->slug; ?>" />
		</div>
		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<div class="grid_2 alpha">
				<label><?php echo $this->translator('page_language'); ?>:</label>
			</div>
			<div class="grid_8 omega">
				<?php 
				echo $this->languageSelector(array(
								'id'       => 'languageSelector', 
								'name'     => 'languageSelector', 
								'selected' => $this->page->language,
								'disabled' => $this->page->language == $this->APP_DEFAULT_LANG, 
							));
				?>
			</div>
		</div>
		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<div class="grid_2 alpha">
				<label><?php echo $this->translator('page_source_item'); ?>:</label>
			</div>
			<div class="grid_8 omega">
				<div class="translatable">
					<?php 
					echo $this->translatablePage(array(
									'id'       => 'sourceItem',
									'name'     => 'sourceItem',
									'selected' => (null == $this->sourcePage) ? null : $this->sourcePage->page_id,
									'disabled' => null,
								), $this->page->language);
					?>
				</div>
			</div>
		</div>
		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<div class="grid_2 alpha">
				<label><?php echo $this->translator('page_parent'); ?>:</label>
			</div>
			<div class="grid_8 omega">
				<div class="translatable">
					<?php 
					echo $this->pageSelect(array(
									'id'       => 'parentId',
									'name'     => 'parentId',
									'selected' => $this->page->parent_id,
									'disable'  => $this->page->page_id,
								), $this->page->language);
					?>
				</div>
			</div>
		</div>
		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<label><?php echo $this->translator('page_description'); ?>:</label>
			<textarea name="description" id="description" class="tinyMCE" style="width: 450px; height: 300px"><?php echo $this->page->description; ?></textarea>
		</div>
		
		<hr />
	</div>
	
	<div class="prefix_1">
		<div class="clearfix t_a_bottom">
			<div class="grid_2 alpha"><label><?php echo $this->translator('page_content'); ?>:</label></div>
			<div class="grid_6"><textarea name="content" id="content" class="tTinyMCE" style="width: 450px; height: 600px"><?php echo $this->page->content; ?></textarea></div>
			<div class="grid_3 omega">
				<?php 
				echo
					$this->helperLoader('upload')->uploader('page', 
							array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'fileExt' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 'sizeLimit' => 1024 * 1024 * 5), 
							array('onComplete' => 'onUploadComplete')); 
				?>
				<div class="photos"><ul id="photos"></ul></div>
			</div>
		</div>
	</div>

	<div class="prefix_1 suffix_1">		
		<hr />
		
		<div class="clearfix t_a_bottom">
			<label>&nbsp;</label>
			<button type="submit"><span><?php echo $this->translator('page_edit_save_button'); ?></span></button>
		</div>
	</div>
</div>
</form>

<script type="text/javascript">
/**
 * Init TinyMCE
 */
 tinyMCE.init({
	theme: 'advanced',
	theme_advanced_toolbar_location: 'top',
	theme_advanced_toolbar_align: 'left',
	width: '450',
	height: '225',
	mode: 'exact',
	elements: 'description',
	content_css: '<?php echo $this->APP_STATIC_SERVER; ?>/skins/<?php echo $this->APP_TEMPLATE; ?>/<?php echo $this->APP_SKIN; ?>/default.css',
	relative_urls: false,
	remove_script_host: false
});
 
tinyMCE.init({
	theme: 'advanced',
	plugins: 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager,preelementfix',
	theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo',
	theme_advanced_buttons3: 'link,unlink,anchor,image,cleanup,code,|,preview,|,forecolor,backcolor',
	theme_advanced_buttons4: 'tablecontrols', //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_toolbar_location: 'top',
	theme_advanced_toolbar_align: 'left',
	width: '450',
	mode: 'exact',
	elements: 'content',
	content_css: '<?php echo $this->APP_STATIC_SERVER; ?>/skins/<?php echo $this->APP_TEMPLATE; ?>/<?php echo $this->APP_SKIN; ?>/default.css',
	relative_urls: false,
	remove_script_host: false
});

/**
 * Upload handler
 */
function onUploadComplete(event, ID, fileObj, response, data) {
	var images = $.evalJSON(response);

	var presentImage = $('<img/>');
	$(presentImage).attr('src', images.thumbnail.url)
		.attr('width', '100').attr('height', '100')
		.attr('style', 'cursor: pointer');
	var select = $('<select/>');
	$(select).attr('width', '100');
	$('<option/>').attr('value', '').html('---').appendTo(select);

	for (var thumb in images) {
		$('<option/>').attr('value', images[thumb].url).html(images[thumb].size).appendTo(select);
	}
	$(select).change(function() {
		if ($(this).val() != '') {
			insertImage($(this).val());
		}
	});

	$('<li/>').append(presentImage).append($('<br/>')).append(select).appendTo($('#photos'));
};

/**
 * Insert image to TinyMCE editor at current position
 * @param string url The image url
 */
function insertImage(url) {
	tinyMCE.getInstanceById('content').execCommand('mceInsertContent', false, '<img src="' + url + '" />');
};

$(document).ready(function() {
	/**
	 * Validate form
	 */
	$.validator.addMethod('slug', function(value) {
		var regex = new RegExp(/^[a-z0-9\-]+$/);
		if (value.match(regex)) {
			return true;
		} else {
			return false;
		}
	});
	
	$('#editPageForm').validate({
		rules: {
			name: {
				required: true,
		  		maxlength: 255
			},
			slug: {
		  		required: true,
		  		slug: true,
		  		maxlength: 255
			}
	    },
	    messages: {
	    	name: {
	        	required: "<?php echo $this->translator('page_name_required'); ?>",
				maxlength: "<?php echo $this->translator('page_name_maxlength'); ?>"
			},
			slug: { 
	        	required: "<?php echo $this->translator('page_slug_required'); ?>",
	        	slug: "<?php echo $this->translator('page_slug_invalid'); ?>",
	        	maxlength: "<?php echo $this->translator('page_slug_maxlength'); ?>"
	    	}
		}
	});

	/**
	 * Automatically create slug once user enter the title
	 */
	$('#name').bind('change', function() {
		$('#slug').val(Tomato.Util.generateSlug($(this).val()));
	});
});
</script>
